<template>
  <div v-if="Object.keys(materialMap).length != 0" class="material_div">
    <a-tabs
      type="card"
      :tabBarGutter="20"
      tabPosition="top"
      :tabBarStyle="{
        backgroundColor: '#f5f6f9',
        border: 'none',
        height: '50px'
      }"
    >
      <a-tab-pane :key="key" v-for="(item, key) in materialMap" :tab="pannleTitle(key)">
        <div style="padding: 0px 16px">
          <a-table :columns="columns" :data-source="item" rowKey="id" :pagination="false" :loading="loading" bordered>
            <span slot="index" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>
            <div slot="nameSlot" slot-scope="text, record">
              <div class="beyond_hiding">
                <a placement="top" @click="previewFile(record)">
                  <template slot="title">
                    <span>{{ record.file.filename }}</span>
                  </template>
                  {{ record.file.filename }}
                </a>
              </div>
            </div>

            <span slot="mattypeSlot" slot-scope="text, record">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ getMetarilNameText(record) }}</span>
                </template>
                {{ getMetarilNameText(record) }}
              </a-tooltip>
            </span>
            <span slot="timeSlot" slot-scope="text, record">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ record.createtime | getTimeFormat('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
                {{ record.createtime | getTimeFormat('YYYY-MM-DD HH:mm:ss') }}
              </a-tooltip>
            </span>
            <span slot="operation" slot-scope="text, record">
              <template>
                <a-icon type="eye" style="color: #1890ff; margin-right: 10px" />
                <a @click="previewFile(record)">查看</a>
                <a-divider type="vertical" />
                <span>
                  <a-icon type="download" style="color: #1890ff; margin-right: 10px" />
                  <a @click="downloadFile(record.file.path, record.file.filename)">下载</a>
                </span>
              </template>
            </span>
          </a-table>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
  <a-empty v-else />
</template>
<script>
import { getMaterialByApplyId } from '@/api/accept/aprv_process_materials'
import { Tp_proctypeEnum } from '@/enumeration/Tp_proctype'
import { Tp_procmaterialList, Tp_procmaterialValue } from '@/enumeration/Tp_procmaterial'
import { kkfilePreview } from '@/utils/util.js'

export default {
  props: {
    applyid: {
      // 申请id
      type: String,
      required: true
    }
  },
  data () {
    return {
      Tp_procmaterial: Tp_procmaterialList,
      loading: false, // 遮罩是否显示
      queryParam: {
        pageNumber: 1,
        pageSize: 20,
        sort: 'createtime',
        order: 'desc',
        f_applyid: ''
      },
      columns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '120px',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '材料名称',
          align: 'center',
          width: '30%',
          scopedSlots: { customRender: 'nameSlot' }
        },
        {
          title: '材料类型',
          align: 'center',
          width: '30%',
          key: 'mattype',
          dataIndex: 'mattype',
          scopedSlots: { customRender: 'mattypeSlot' }
        },
        {
          title: '时间',
          align: 'center',
          width: '30%',
          scopedSlots: { customRender: 'timeSlot' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '150px',
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      materialMap: {}
    }
  },
  created () {
    this.queryParam.f_applyid = this.applyid
    this.getMaterial()
  },
  methods: {
    getMaterial () {
      getMaterialByApplyId(this.queryParam).then(res => {
        console.log('getMaterialByApplyId', res.data)
        if (res.code == 0) {
          this.materialMap = res.data
        } else {
          this.materialMap = {}
        }
      })
    },
    previewFile (record) {
      window.open(kkfilePreview(record.file.path))
    },
    downloadFile (url, fileName) {
      var x = new XMLHttpRequest()
      x.open('GET', url, true)
      x.responseType = 'blob'
      x.onload = function (e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a')
        a.href = url
        a.download = fileName
        a.click()
      }
      x.send()
    },
    getMetarilNameText (record) {
      // 非自定义材料
      if (record.mattype != Tp_procmaterialValue.MATER_CUSTOMER) {
        for (const key in this.Tp_procmaterial) {
          if (this.Tp_procmaterial[key].value == record.mattype) {
            return this.Tp_procmaterial[key].name
          }
        }
      } else {
        if (record.customerMaterial) {
          return '自定义材料-' + record.customerMaterial.name
        }
      }
      return val
    },
    pannleTitle (val) {
      return Tp_proctypeEnum[val] ? Tp_proctypeEnum[val].name : ''
    }
  }
}
</script>
<style lang="less" scoped>
::v-deep .ant-table-thead > tr > th {
  background: #f2f8fc;
}

.material_div {
  ::v-deep .ant-tabs-ink-bar {
    margin: 0px 15%;
    width: 50px !important;
  }
  // ::v-deep .ant-table-column-title {
  //   font-weight: bold;
  // }
  // ::v-deep .ant-tabs-nav .ant-tabs-tab {
  //   font-weight: bold;
  // }
  ::v-deep .ant-tabs-nav-container {
    height: 50px !important;
  }
  ::v-deep .ant-tabs-tab {
    background-color: rgba(240, 240, 240, 0.44) !important;
    color: #000000 !important;
    box-shadow: 0px 0px 46px 0px rgba(240, 240, 240, 0.44) !important;
    min-width: 140px !important;
    text-align: center;
    height: 50px !important;
    line-height: 50px !important;
  }
  ::v-deep .ant-tabs-tab-active {
    background-color: #fff !important;
    color: #0072c6 !important;
  }
}
</style>
